<template>
    <div class="l-header">
      <img class="l-logo" :src="logo" alt="无法显示">
      <div class="l-right-content">
        <img class="l-toggle" @click="toggleMenu"  :src="menuIcon" alt="无法显示">
        <div @click="scroll" ref="dronMenu" class="l-menu-content">
          <div data-scroll="about" class="l-menu-item">关于我们</div>
          <div data-scroll="team" class="l-menu-item">团队介绍</div>
          <div data-scroll="techincal" class="l-menu-item">技术概要</div>
          <div data-scroll="process" class="l-menu-item">规划进程</div>
          <div data-scroll="news" class="l-menu-item">新闻资讯</div>
          <div data-download="blockBrows" class="l-menu-item">区块浏览</div>
          <div data-download="wallet" class="l-menu-item">钱包下载</div>
          <div @click="router" class="l-menu-item">个人中心</div>
        </div>
      </div>
    </div>
</template>

<script>
    import logo from '~/img/logo.png'
    import menuIcon from '~/img/nav.png'
    export default {
        name: "header-top",
        data () {
          return {
            logo,
            menuIcon,
            isShow: true
          }
        },
        methods: {
          toggleMenu () {
            let menu = this.$refs.dronMenu
            let itemList = [].slice.call(menu.getElementsByClassName("l-menu-item"))
            if(this.isShow) {
              itemList.forEach((item, index) => {
                let topset = index * 60
                Velocity(item, {
                  top: topset+"px"
                }, {
                  duration: 1000,
                  begin: () => {
                    menu.classList.add("l-active")
                  }
                })
              })

            } else {
              itemList.forEach((item, index) => {
                let topset = 0
                Velocity(item, {
                  top: topset+"px"
                }, {
                  duration: 1000
                })
              })

              setTimeout(() => {
                menu.classList.remove("l-active")
              },1000)
            }

            this.isShow = !this.isShow
          },
          scroll (e) {
            if(e.dataset.download) {
              // 负责下载
              window.location.href = e.dataset.download
            } else {
              let menu = this.$refs.dronMenu
              let itemList = [].slice.call(menu.getElementsByClassName("l-menu-item"))
              itemList.forEach((item, index) => {
                let topset = 0
                Velocity(item, {
                  top: topset+"px"
                }, {
                  duration: 1000
                })
              })
              this.isShow = !this.isShow
              setTimeout(() => {
                menu.classList.remove("l-active")
              },1000)
            }
            this.$emit('scroll', e.target)
          },
          router () {
            let token = localStorage.getItem('token')
            if(!token) {
              this.$router.push({name: 'login'})
            } else {
              this.$router.push({name: 'account'})
            }
          }
        }
    }
</script>

<style lang="less" scoped>
.l-header {
  background-color: #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 20px;
  height: 100px; /*no*/
  position: relative;
}

  .l-menu-content {
    position: absolute;
    width: 100%;
    top: 100px; /*no*/
    left: 0;
    color: #fff;
    background-color: #000;
    z-index: 99;
    display: none;

     &.l-active {
      display: block;
     }
    .l-menu-item {
      width: 100%;
      text-align: center;
      font-size: 20px; /*no*/
      color: #be995b;
      height: 60px; /*no*/
      line-height: 60px; /*no*/
      position: absolute;
      top: 0; /*no*/
      left: 0;
      background-color: #000;
    }
  }

  .l-toggle {
    z-index: 120;
  }
</style>
